<template>
  <div class="">
    <van-nav-bar
      title="购物车"
      :left-text="flag ? '完成' : '编辑'"
      left-arrow
      @click-left="flag = !flag"
    />
    <van-row v-for="item in shopcar" :key="item.id">
      <van-col span="4">
        <input type="checkbox" v-model="item.status" @change="changeItem" />
      </van-col>
      <van-col span="20">
        <van-card
          :num="item.num"
          :price="item.minPrice"
          :title="item.name"
          :thumb="item.pic"
        >
          <template #footer>
            <van-stepper v-model="item.num" />
          </template>
        </van-card>
      </van-col>
    </van-row>

    <van-submit-bar
      :price="$store.getters.price * 100"
      :button-text="flag ? '选中删除' : '提交订单'"
      @submit="onSubmit"
    >
      <van-checkbox v-model="$store.state.checked" @click="checkall"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      flag: false,
    });
    const shopcar = computed(() => {
      return store.state.shopcar;
    });

    const changeItem = () => {
      store.commit("changeItem");
    };
    const checkall = () => {
      store.commit("checkall");
    };

    const onSubmit = () => {
      if (data.flag == true) {
        store.commit("clear");
      }
    };
    return { ...toRefs(data), shopcar, changeItem, checkall, onSubmit };
  },
};
</script>

<style lang="scss"></style>
